<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src='./src/vue.js'></script>
	</head>

	<body>
		<div id="app">
			<h2>未来的某个时刻出现第二个组件--动态组件</h2>
			<button @click="view='custom1'">出现custome1</button>
			<button @click="view='custom2'">出现custome2</button>
			<button @click="view='custom3'">出现custome3</button>
			<keep-alive :include='arr'>
				<component :is="view"></component>
			</keep-alive>
			
		</div>
		
		<script>
			// 动态组件
			// 切换到对应的组件上，会重新构建一次
			// 切换走了，会销毁
			// 保留组件的状态
			Vue.component('custom1',{
				template: `<div>
					<h2>custom1</h2>
					<input type="text" />
				</div>`,
				created(){
					console.log('custom1:重新生成');
				},
				destroyed(){
					console.log('custom1:销毁');
				}
			})
			Vue.component('custom2',{
				template: `<div>
				<h2>custom2</h2>
					<input type="text" />
				</div>`
			})

			Vue.component('custom3',{
				template: `<div>
				<h2>custom3</h2>
					<input type="text" />
				</div>`
			})


			let vm = new Vue({
				data:{
					view: 'custom1',
					arr:["custom1","custom2"]
				},
				created(){
					/*setTimeout( () => {
						this.view = 'custom2';	
					},3000)*/
				}
			})

			vm.$mount('#app');	
		</script>
	</body>
</html>